<template>
   <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:current-page="page.currentPage"
      v-model:page-sizes="perPage"
      v-model:page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
import {reactive, ref,inject,toRef,isReactive} from 'vue'
export default {
    inject:['page'],
    emits:['current-change','SizeChange'],
    name:'Pagechange',
    setup(props,context) {
      // vue构思依托 inject 不能直接监听
      // let page = inject('page') 
      // let currentPage = ref(page.currentPage)
      // let pageSize = ref(page.pageSize)
      // let total = ref(page.total)
      function handleCurrentChange(val) {
        context.emit('CurrentChange', val)
      }
      function handleSizeChange(val) {
        context.emit('SizeChange',val)
      }
      return {
        handleCurrentChange,
        handleSizeChange,
        // currentPage,
        // pageSize,
        // total
      }
    },
    computed:{
      perPage(){
        const num = this.page.total/10
        const perPage = []
        for(let i = 0;i < num;i++)
        {
          perPage[i] = (i+1)*10
        }
        return perPage
      }
    }
}
</script>

<style scoped>

</style>